<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> 添加产品">
          <div class="search-box">
            <b-button variant="outline-primary" @click="searchAllGid()">查看全部</b-button>
          </div>
          <div class="search-box">
            <input type="text" class="form-control"  placeholder="goodsid" v-model="goodsid" @keyup.enter="searchGid()">
            <b-button variant="outline-primary" @click="searchGid()">搜索</b-button>
          </div>
          <div class="search-box">
            <strong>请选择要添加的产品：</strong>
          </div>
          <h5 v-show="isPro">没有搜索到相关产品信息！</h5>
          <b-form-fieldset v-if="prolist.length">
            <b-form-checkbox
              v-for="(item,index) in prolist"
              :key="index"
              :value="item.goodsid"
              v-model="checkedNames"
              @click="selectId">
              {{ item.goodsid }} , {{ item.name }}
            </b-form-checkbox>
          </b-form-fieldset>
          <footer v-show="isBtn">
            <button type="button" class="btn btn-primary btn-md" @click="sureAddPro()">确认</button>
            <br style="clear: both;">
          </footer>
          <el-pagination
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :current-page.sync="current"
            :page-size="20"
            :total="total">
          </el-pagination>
        </b-card>
      </div>
    </div>
  </div>

</template>

<script>
  import { selectAllCatalogs, addProduct } from '../../service/api'
  export default {
    name: 'tables',
    data () {
      return {
        current: 1,
        currentData: [],
        totalPage: '2416',
        prolist: [],
        checkedNames: [],
        goodsid: '',
        isPro: false,
        isBtn: true
      }
    },
    computed: {
      total () {
        return ~~this.totalPage
      }
    },
    methods: {
      selectId () {
        alert(this.checkedNames)
      },
      searchGid () {
        if (this.goodsid === '' || !this.goodsid.trim()) {
          alert('搜索内容不能为空!')
        } else {
          selectAllCatalogs({sid: this.$route.query.sid, goodsid: this.goodsid, currentPage: 1, lineSize: 20})
            .then(({ data, err }) => {
              console.log('data: ' + data)
              console.log('err: ' + err)
              if (data.code === 200) {
                this.totalPage = data.count
                this.current = 1
                this.prolist = data.result.filter(item => item && !!item.goodsid)
                console.log(this.prolist)
                if (data.result.length === 0) {
                  this.isPro = true
                  this.isBtn = false
                } else {
                  this.isPro = false
                  this.isBtn = true
                }
              }
            })
        }
      },
      searchAllGid () {
        this.goodsid = ''
        selectAllCatalogs({sid: this.$route.query.sid, goodsid: this.goodsid, currentPage: 1, lineSize: 20})
          .then(({ data, err }) => {
            console.log('data: ' + data)
            console.log('err: ' + err)
            if (data.code === 200) {
              this.totalPage = data.count
              this.prolist = data.result.filter(item => item && !!item.goodsid)
              console.log(this.prolist)
              if (data.result.length === 0) {
                this.isPro = true
                this.isBtn = false
              } else {
                this.isPro = false
                this.isBtn = true
              }
            }
          })
      },
      sureAddPro () {
        const clength = this.checkedNames.length - 1
        console.log(this.checkedNames)
        for (const i in this.checkedNames) {
          console.log(clength)
          console.log(localStorage.getItem('username'))
          addProduct({sid: this.$route.query.sid, goodsid: this.checkedNames[i], user: localStorage.getItem('username')})
            .then(({ data, err }) => {
              console.log('data: ' + data)
              console.log('err: ' + err)
              if (err || data.code !== 200) {
                alert('添加失败！')
                return false
              }
              alert('添加成功！')
              this.$router.go(-1)
            })
        }
      },
      handleCurrentChange () {
        console.log('handleCurrentChange: ' + this.current)
        selectAllCatalogs({sid: this.$route.query.sid, goodsid: this.goodsid, currentPage: this.current, lineSize: 20})
          .then(({ data, err }) => {
            console.log('data: ' + data)
            console.log('err: ' + err)
            if (data.code === 200) {
              this.prolist = data.result.filter(item => item && !!item.goodsid)
              console.log(this.prolist)
            }
          })
      }
    },
    created () {
      selectAllCatalogs({sid: this.$route.query.sid, goodsid: this.goodsid, currentPage: 1, lineSize: 20})
        .then(({ data, err }) => {
          console.log('data: ' + data)
          console.log('err: ' + err)
          if (data.code === 200) {
            this.totalPage = data.count
            this.prolist = data.result.filter(item => item && !!item.goodsid)
            console.log(this.prolist)
          }
        })
    }
  }
</script>
<style>
  .badge{
    cursor: pointer;
  }
  .search-box{
    vertical-align: top;
    margin-bottom: 25px;
  }
  .search-box input{
    vertical-align: top;
    display: inline-block;
    width: 250px;
  }
  .search-box strong{
    font-size: 1rem;
  }
  .custom-control {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    width: 320px;
    margin-right: 1rem;
  }
</style>
